<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态表格</title>
    <style>
      table,
      th,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 50px auto;
        padding: 10px 50px;
        text-align: center;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
    <script>
      //模拟表格数据
      let itemName1 = 'iPhone 15',
        itemName2 = 'iPad Pro ',
        itemName3 = 'Apple Watch Ultra 2'
      let itemPic1 = 'iphone15.jpg',
        itemPic2 = 'ipad.jpg',
        itemPic3 = 'iWatch.jpg'
      let itemPrice1 = 9999,
        itemPrice2 = 9299,
        itemPrice3 = 6499
      let itemCount1 = 1,
        itemCount2 = 1,
        itemCount3 = 1

      //定义表格
      let table = `
              <table>
                <caption>商品表</caption>
                <thead>
                  <tr>
                    <th><input type='checkbox' name='all'/></th><th>商品名称</th><th>图片</th><th>价格</th><th>数量</th><th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName1}</td><td><img src='../img/${itemPic1}'></img></td><td>${itemPrice1}</td><td>${itemCount1}</td><td><a href='#'>删除</a></td>
                  </tr>
                  <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName2}</td><td><img src='../img/${itemPic2}'></img></td><td>${itemPrice2}</td><td>${itemCount2}</td><td><a href='#'>删除</a></td>
                  </tr>
                  <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName3}</td><td><img src='../img/${itemPic3}'></img></td><td>${itemPrice3}</td><td>${itemCount3}</td><td><a href='#'>删除</a></td>
                  </tr>
                   <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName1}</td><td><img src='../img/${itemPic1}'></img></td><td>${itemPrice1}</td><td>${itemCount1}</td><td><a href='#'>删除</a></td>
                  </tr>
                  <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName2}</td><td><img src='../img/${itemPic2}'></img></td><td>${itemPrice2}</td><td>${itemCount2}</td><td><a href='#'>删除</a></td>
                  </tr>
                  <tr>
                    <td><input type='checkbox' class='ck'/></td><td>${itemName3}</td><td><img src='../img/${itemPic3}'></img></td><td>${itemPrice3}</td><td>${itemCount3}</td><td><a href='#'>删除</a></td>
                  </tr>
                </tbody>
              </table>
              `
      //输出表格
      document.write(table)

      const all = document.querySelector('input[name=all]')
      const cks = document.querySelectorAll('.ck')
      all.onclick = function () {
        if (this.checked) {
          cks.forEach(ck => (ck.checked = true))
        } else {
          cks.forEach(ck => (ck.checked = false))
        }
      }
      cks.forEach(ck => {
        ck.onclick = function () {
          //如果当前多选框没有选中,则全选取消
          if (!this.checked) {
            all.checked = false
          }
          //如果所有多选框都被选中,则全选起效
          if (Array.from(cks).filter(ck => ck.checked).length == cks.length) {
            all.checked = true
          }
        }
      })
    </script>
  </head>
  <body></body>
</html>
